<template>
  <div class="form-comp">
    <div class="toolbar-item toolbar-select"
         v-if="label">
      <el-input size="default"
                :style="{width:(label.length==2?'68px':label.length==3?'82px':label.length==4?'96px':label.length==7?'138px':label.length==6?'128px':''),float:'left'}">
        <template #prepend>{{ label }}</template>
      </el-input>
      <el-select ref="select"
                 multiple
                 size="default"
                 :class="label.length==3?'prepend-3':label.length==4?'prepend-4':label.length==5?'prepend-5':label.length==6?'prepend-6':label.length==7?'prepend-7':'prepend-2'"
                 placeholder="请选择">
        <el-option
            v-for="(item,index) in checkSelectCell"
            :key="index"
            :label="item.title"
            :value="true">
          <el-checkbox @change="clickBox(item.cellIndex)" v-model="item.defaultCheck" :label="item.title"></el-checkbox>
        </el-option>
      </el-select>
    </div>
    <el-select ref="select" multiple
               v-else placeholder="请选择">
      <el-option
          v-for="(item,index) in checkSelectCell"
          :key="index"
          :label="item.title"
          style="width:100%;"
          :value="true">
        <el-checkbox @change="clickBox(item.cellIndex)" v-model="item.defaultCheck" :label="item.title"></el-checkbox>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {onMounted, ref} from "vue";

defineOptions({
  name: "CellSelectShow"
});

const props = defineProps({
  tableColumns: {type: Array, required: true},
  label: {type: String, required: false}
});

const defaultTableColumns = ref<any>(props.tableColumns);

const checkSelectCell = ref<any>([]);
onMounted(() => {
  checkSelectCell.value = [];
  for (let i = 0; i < defaultTableColumns.value.length; i++) {
    let item: any = defaultTableColumns.value[i];
    if (item.hasOwnProperty('dynamicCell')) {
      item.defaultCheck = false;
      item.cellIndex = i;
      if (item.hasOwnProperty('showCell')) {
        item.defaultCheck = item.showCell;
      }
      checkSelectCell.value.push(item);
    }
  }
})

const clickBox = (index: number) => {
  let item = defaultTableColumns.value[index];
  item.showCell = !item.showCell;
}

</script>

<style scoped>

</style>